<script setup>
	import { ref, reactive } from 'vue'
	// 子组件
	// 任务通知模块
	import slNotify from './components/notify'
	// 公告模块
	import slAnnounce from './components/announce'

	// Tab 标签页索引
	// 当前点击选中页签的索引值
	const tabIndex = ref(0)
	const tabMetas = reactive([{
			title: '任务通知',
			rendered: true,
		},
		{
			title: '公告',
			rendered: false,
		},
	])
	// 切换标签页
	function onTabChange(index) {
		tabMetas[index].rendered = true
		tabIndex.value = index
	}
</script>

<template>
	<view class="page-container">
		<view class="message-tabbar">
			<text v-for="(tabMeta, index) in tabMetas" :key="tabMeta.title" @click="onTabChange(index)"
				:class="{ active: tabIndex === index }" class="tab">{{ tabMeta.title }}</text>
		</view>
		<!-- pages/message/index.vue 
	   tab 切换实现：
				 需求：既能切换，又有缓存和懒加载（ 性能 ）
				 说明：
				 1. 只使用 v-show 可以实现，但是有问题：公告列表也会默认被加载，没有懒加载
				 2. 只使用 v-if 可以实现，但是有问题：没有缓存=》通过元素新增或删除
				vue 使用 keep-alive 缓存组件，但是 uni-app兼容性 不好
				
				 解决：
				 同时使用 v-if 和 v-show 结合控制显示隐藏
				 v-if 有惰性，优先级高=》只有 true 元素才会被创建显示，显示之后 false 才会被销毁
				 第一次：按照 v-if 控制显示隐藏
				 后续：都显示加载显示后，按照 v-show 控制显示隐藏
		 -->
		<!-- 1. 任务通知模块 -->
		<view class="message-list" v-show="tabIndex === 0" v-if="tabMetas[0].rendered">
			<sl-notify></sl-notify>
		</view>
		<!-- 2. 公告模块 -->
		<view class="message-list" v-show="tabIndex === 1" v-if="tabMetas[1].rendered">
			<sl-announce></sl-announce>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	@import './index.scss';
</style>